<script lang="ts" setup>
import { h, ref } from 'vue';

import { DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

import RoleMenuRelation from '#/views/system/component/RoleMenuRelation.vue';

const params = ref({
  keyword: '',
});

const dataSource = ref([
  {
    id: '123456',
    roleName: '超级管理员',
    roleCode: 'SUPER_ADMIN',
    createTime: '2025-08-15 15:31:24',
  },
  {
    id: '123456',
    roleName: '普通用户',
    roleCode: 'NORMAL',
    createTime: '2025-08-15 15:31:24',
  },
]);
const columns = ref([
  {
    title: '角色名称',
    dataIndex: 'roleName',
    key: 'roleName',
    width: 120,
    align: 'center',
  },
  {
    title: '角色编码',
    dataIndex: 'roleCode',
    key: 'roleCode',
    width: 120,
    align: 'center',
  },

  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 140,
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 140,
    align: 'center',
  },
]);

const visible = ref<Boolean>(false);

const showModal = () => {
  visible.value = true;
};
const closeModal = () => {
  visible.value = false;
};
const handleDelete = () => {
  message.success('删除成功');
};
</script>
<template>
  <div class="page-wrap">
    <div class="action-wrap">
      <a-space class="button-wrap">
        <a-button type="primary">新增</a-button>
      </a-space>
      <a-space class="search-wrap">
        <a-input style="width: 120px" v-model:value="params.keyword" />
        <a-button type="primary">搜索</a-button>
      </a-space>
    </div>
    <div class="content-wrap">
      <a-table :data-source="dataSource" :columns="columns">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column?.key === 'status'">
            <a-tag v-if="record.status === '0'" color="orange">
              未开始/进行中
            </a-tag>
            <a-tag v-else color="blue">已完成</a-tag>
          </template>
          <template v-if="column?.key === 'operation'">
            <div>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(SettingOutlined)"
                @click="showModal(record)"
              >
                配置
              </a-button>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(DeleteOutlined)"
                @click="handleDelete(record)"
              >
                删除
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
    </div>
    <RoleMenuRelation :open="visible" role-id="1" @close="closeModal" />
  </div>
</template>
<style scoped></style>
